<template>
  <div style="cursor:pointer">
    <div v-for="(item, index) in state" :key="index">
      <img v-show="item.alt == browser" :id="item.alt" :src="item.src" :alt="item.alt">
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
// 引入图标
import chrome from "@/assets/browser/chrome.png";
import firefox from "@/assets/browser/firefox.png";
import opera from "@/assets/browser/opera.png";
import safari from "@/assets/browser/safari.png";
import edge from "@/assets/browser/edge.png";
// 初始化数据
const state = reactive([
  { name: '谷歌浏览器', src: chrome, alt: 'chrome' },
  { name: '微软浏览器', src: edge, alt: 'edge' },
  { name: '火狐浏览器', src: firefox, alt: 'firefox' },
  { name: '欧朋浏览器', src: opera, alt: 'opera' },
  { name: '苹果浏览器', src: safari, alt: 'safari' },
])
// 浏览器图标
let browser = ref('');
function myBrowser() {
  if (navigator.userAgent.match(/edg/i)) {
    browser.value = "edge"
  } else if (navigator.userAgent.match(/firefox|fxios/i)) {
    browser.value = "firefox"
  } else if (navigator.userAgent.match(/opr\//i)) {
    browser.value = "opera"
  } else if (navigator.userAgent.match(/chrome|chromium|crios/i)) {
    browser.value = "chrome"
  } else if (navigator.userAgent.match(/safari/i)) {
    browser.value = "safari"
  } else {
    alert("无法检测当前浏览器！") || console.log("无法检测当前浏览器！");
  }
}
myBrowser()
</script>

<style scoped>
img {
  width: 24px;
  height: 24px;
}
</style>